<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Spry Checkbox Validation Sample</title>
<link href="../../css/samples.css" rel="stylesheet" type="text/css" />
<script src="../../widgets/checkboxvalidation/SpryValidationCheckbox.js" type="text/javascript"></script>
<link href="../../widgets/checkboxvalidation/SpryValidationCheckbox.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.tablecontainer {
	width: 600px;
	clear: both;
}
.tabletitle {
	margin-bottom: 7px;
}
.tablecell {
	width: 33%;
	height: 70px;
	float: left;
}
.submitContainer {
	clear: both;
	margin-left: 5px;
}
#acceptContainer1.checkboxRequiredState .checkboxRequiredMsg {
	text-align: left;
	color: blue;
	font-size: 13px;
	border: 1px solid blue;
}
#acceptContainer2.checkboxRequiredState {
	text-align: left;
	color: red;
	font-size: 14px;
	font-weight: bold;
}
#form6 input, #form5 input {
	margin-top: 10px;
    margin: bottom: 10px;
}
table {
	margin-bottom: 5px;
}
td {
	width: 130px;
}
</style>
</head>
<body>
<h3>Spry Checkbox Validation Samples</h3>
<p>This page gives examples of the Spry checkbox validation widget capabilities.</p>
<hr />
<!--
	First Example - Different validation moments - Change, Blur, Submit
-->
<p>This is an example of a checkbox validation widget. There are three validation
  techniques: validation can occur as you go (Change), when the text field loses
  focus (Blur) or  when the form is submitted (Submit). The Submit validation
  occurs always, regardless of the other options chosen. </p>
<form id="form1" name="form1" method="get" action="CheckboxValidationSample.html">
  <div class="tablecontainer">
    <div class="tablecell">
      <div class="tabletitle">Change - Submit</div>
      <span id="ValidCheckbox1">
      <input type="checkbox" name="checkbox1" id="checkbox1" checked="checked"/> 
      <label for="checkbox1">Check me!</label><br/>
      
      <span class="checkboxRequiredMsg">Please make a selection.</span><br /><br /> </span> </div>
    <div class="tablecell">
      <div class="tabletitle">Blur - Submit</div>
      <span id="ValidCheckbox2">
      <input type="checkbox" name="checkbox2" id="checkbox2" />
      <label for="checkbox2">Check me!</label><br/>
      
      <span class="checkboxRequiredMsg">Please make a selection.</span><br /><br /> </span> </div>
    <div class="tablecell">
      <div class="tabletitle">Submit</div>
      <span id="ValidCheckbox3">
      <input name="checkbox3" type="checkbox" id="checkbox3" />
      <label for="checkbox3">Check me!</label><br/>

      <span class="checkboxRequiredMsg">Please make a selection.</span><br /><br /> </span> </div>
    <br style="clear:both;" />
  </div>
  <div class="submitContainer">
    <input type="submit" name="submit" id="submit" value="Submit" />
  </div>
</form>
<script type="text/javascript">
<!--
var ValidCheckbox1 = new Spry.Widget.ValidationCheckbox("ValidCheckbox1", {validateOn:["change"]});
var ValidCheckbox2 = new Spry.Widget.ValidationCheckbox("ValidCheckbox2", {validateOn:["blur"]});
var ValidCheckbox3 = new Spry.Widget.ValidationCheckbox("ValidCheckbox3");
//-->
</script>
<hr />
<!--

	Second example - select at least two checkboxes, but no more than five

-->
<p>The widget can also be applied on a group of checkboxes, to ensure that a
  minimum and/or maximum selections have been made. This sample forces the
  user to select at least two checkboxes, but no more than five. </p>
<p>Categories:</p>
<form id="form4" name="form4" method="get" action="CheckboxValidationSample.html">
  <table id="ValidCheckbox4">
    <tr>
      <td><input type="checkbox" name="Entertainment" id="Entertainment" />
        <label for="Entertainment">Entertainment</label>
      </td>
      <td><input type="checkbox" name="Computers" id="Computers" />
        <label for="Computers">Computers</label>
      </td>
      <td><input type="checkbox" name="Sports" id="Sports" />
        <label for="Sports">Sports</label>
      </td>
    </tr>
    <tr>
      <td><input type="checkbox" name="Health" id="Health" />
        <label for="Health">Health</label>
      </td>
      <td><input type="checkbox" name="Finance" id="Finance" />
        <label for="Finance">Finance</label>
      </td>
      <td><input type="checkbox" name="Travel" id="Travel" />
        <label for="Travel">Travel</label>
      </td>
    </tr>
    <tr>
      <td><input type="checkbox" name="Music" id="Music" />
        <label for="Music">Music</label>
      </td>
      <td><input type="checkbox" name="Technology" id="Technology" />
        <label for="Technology">Technology</label>
      </td>
      <td><input type="checkbox" name="Publishing" id="Publishing" />
        <label for="Publishing">Publishing</label>
      </td>
    </tr>
    <tr>
      <td colspan="3" style="width:100%;"><span class="checkboxRequiredMsg">Please make a selection.</span> <span class="checkboxMinSelectionsMsg">Minimum number of selections not met.</span> <span class="checkboxMaxSelectionsMsg">Maximum number of selections exceeded.</span>&nbsp; </td>
    </tr>
  </table>
  <input name="Submit" type="submit" value="Submit" />
</form>
<script type="text/javascript">
<!--
var ValidCheckbox4 = new Spry.Widget.ValidationCheckbox("ValidCheckbox4", {minSelections:2, maxSelections:5, validateOn:["change", "blur"]});
//-->
</script>
<hr />
<!--

	Third Example - Styling the error messages

-->
<p>This is an example showing how to style the error messages, using a css class similar to the one from the SpryValidationCheckbox.css file.</p>
<form id="form5" name="form5" method="get" action="CheckboxValidationSample.html">
  <textarea name="EULA1" id="EULA1" cols="45" rows="5" readonly="readonly">Software License Agreement

NOTICE TO USER: PLEASE READ THIS AGREEMENT CAREFULLY. BY COPYING, INSTALLING OR USING ALL OR ANY PORTION OF THE SOFTWARE YOU ACCEPT ALL THE TERMS AND CONDITIONS OF THIS AGREEMENT, INCLUDING, IN PARTICULAR THE LIMITATIONS ON: USE CONTAINED IN SECTION 2; TRANSFERABILITY IN SECTION 4; WARRANTY IN SECTIONS 6 AND 7; LIABILITY IN SECTION 8; AND SPECIFIC PROVISIONS AND EXCEPTIONS IN SECTION 14. YOU AGREE THAT THIS AGREEMENT IS LIKE ANY WRITTEN NEGOTIATED AGREEMENT SIGNED BY YOU. THIS AGREEMENT IS ENFORCEABLE AGAINST YOU AND ANY LEGAL ENTITY THAT OBTAINED THE SOFTWARE AND ON WHOSE BEHALF IT IS USED: FOR EXAMPLE, IF APPLICABLE, YOUR EMPLOYER. IF YOU DO NOT AGREE TO THE TERMS OF THIS AGREEMENT, DO NOT USE THE SOFTWARE. VISIT http://www.mysite.com FOR TERMS OF AND LIMITATIONS ON RETURNING THE SOFTWARE FOR A REFUND
			
Do you accept the terms and conditions stated above?
</textarea>
  <br />
  <span id="acceptContainer1">
  <label for="accept">
  <input type="checkbox" name="accept" id="accept" />
  I accept</label>
  <span class="checkboxRequiredMsg">You cannot submit the form until you accept the terms of the licence agreement!</span> </span><br />
  <input type="submit" name="submit4" id="submit4" value="Submit" />
</form>
<script type="text/javascript">
<!--
var acceptContainer1 = new Spry.Widget.ValidationCheckbox("acceptContainer1");
//-->
</script>
<hr />
<!--

Fourth Example - Styling the checkbox label, no error messages

-->
<p>You can change the widget container to use  the checkbox label, and not to use any error messages. </p>
<form id="form6" name="form6" method="get" action="CheckboxValidationSample.html">
  <textarea name="EULA2" id="EULA2" cols="45" rows="5" readonly="readonly">Software License Agreement

NOTICE TO USER: PLEASE READ THIS AGREEMENT CAREFULLY. BY COPYING, INSTALLING OR USING ALL OR ANY PORTION OF THE SOFTWARE YOU ACCEPT ALL THE TERMS AND CONDITIONS OF THIS AGREEMENT, INCLUDING, IN PARTICULAR THE LIMITATIONS ON: USE CONTAINED IN SECTION 2; TRANSFERABILITY IN SECTION 4; WARRANTY IN SECTIONS 6 AND 7; LIABILITY IN SECTION 8; AND SPECIFIC PROVISIONS AND EXCEPTIONS IN SECTION 14. YOU AGREE THAT THIS AGREEMENT IS LIKE ANY WRITTEN NEGOTIATED AGREEMENT SIGNED BY YOU. THIS AGREEMENT IS ENFORCEABLE AGAINST YOU AND ANY LEGAL ENTITY THAT OBTAINED THE SOFTWARE AND ON WHOSE BEHALF IT IS USED: FOR EXAMPLE, IF APPLICABLE, YOUR EMPLOYER. IF YOU DO NOT AGREE TO THE TERMS OF THIS AGREEMENT, DO NOT USE THE SOFTWARE. VISIT http://www.mysite.com FOR TERMS OF AND LIMITATIONS ON RETURNING THE SOFTWARE FOR A REFUND
	
Do you accept the terms and conditions stated above?
	</textarea>
  <br />
  <label id="acceptContainer2" for="accept2">
  <input type="checkbox" name="accept2" id="accept2"/>
  I accept </label>
  <br />
  <input type="submit" name="submit5" id="submit5" value="Submit" />
</form>
<script type="text/javascript">
<!--
var acceptContainer2 = new Spry.Widget.ValidationCheckbox("acceptContainer2", {validateOn:["change"]});
//-->
</script>
</body>
</html>
